<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米商城</title>
    <link rel="stylesheet" href="css/index.css">
    
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="top-nav row">
        <div class="top-nav-content">
            <div class="top-nav-content-left">
                <span>小米网</span>    
                <span>MIUI</span>

                <span>米聊</span>
                 
                <span>游戏</span>
                 
                <span>多看阅读</span>
                 
                <span>云服务</span>
                 
                <span>小米网移动版</span>
                 
                <span>Select region</span>
                 
                <span>米粉节答疑</span>
            </div>
            <div class="top-nav-content-right">
                <span>注册</span>
                 
                <span>登陆</span>
            </div>
        </div>
    
    
    
    
    </div>
    <div class="content-frame">
        <div class="content-top">
            <img src="images/logo.png" alt="" class="mi-logo">
            <div class="content-top-right">
              <p><img src="images/clock.png" alt=""><span class="shoptime">4月14日开放购买</span></p>
              <div class="content-top-right-content">
                <div class="content-top-right-search"> 
                    <input type="text" placeholder="搜索您需要的商品">
                    <i><img src="images/fangdajing.png" alt="" class="fdj"></i>
                    <button class="gwc"><img src="images/shopcar.png" alt="">&nbsp;购物车</button>
                    <div class="content-top-right-search-txt">
                      <span>小米手环</span> 
                      <span>耳机音箱</span> 
                      <span>保护壳</span> 
                    </div>
                </div>
                
              </div>
            </div>
        </div>
        <div class="content-menu-top">
            <span>全部商品分类</span>
            <span>首页</span>
            <span>小米手机</span>
            <span>红米</span>
            <span>小米平板</span>
            <span>小米电视</span>
            <span>盒子</span>
            <span>路由器</span>
            <span>合约机</span>
            <span>服务</span>
            <span>社区</span>
        </div>
        <div class="content-menu-content">
            <div class="content-menu-content-left">
                <div class="row">
                    <p >购买手机</p>
                    <p>小米Noto&nbsp;小米4&nbsp;红米&nbsp;红米Noto</p>
                </div>
                <div class="row">
                    <p >购买电视与平板</p>
                    <p>小米电视&nbsp;小米盒子&nbsp;小米平板</p>
                </div>
                <div class="row">
                    <p >路由器与智能硬件</p>
                    <p>路由器&nbsp;体重秤&nbsp;净化器与滤芯</p>
                </div>
                <div class="row">
                    <p >插线板、移动电源与电池</p>
                    <p>小米移动电源&nbsp;电池&nbsp;充电器&nbsp;</p>
                </div>
                <div class="row">
                    <p >耳机音箱与储存卡</p>
                    <p>小米头戴式耳机&nbsp;小米活塞耳机&nbsp;</p>
                </div>
                <div class="row">
                    <p >保护套与贴膜</p>
                    <p>保护套/保护壳&nbsp;贴膜&nbsp;防尘塞</p>
                </div>
                <div class="row">
                    <p >后盖与个性化配件</p>
                    <p>米键&nbsp;后盖&nbsp;贴纸&nbsp;手机支架</p>
                </div>
                <div class="row">
                    <p >小米生活方式</p>
                    <p>服装&nbsp;米兔&nbsp;背包&nbsp;生活周边</p>
                </div>
            </div>
            <div class="content-menu-content-right-frame">
                <!-- 轮播图 -->
                <div class="roll-icons">
                        <div class="pics">
                                <img src="images/banner1.png" alt="">
                                <img src="images/banner2.png" alt="">
                                <img src="images/banner3.png" alt="">
                                <img src="images/banner4.png" alt="">
                                <img src="images/banner5.png" alt="">
                            </div>
                            <button class="prev "></button>
                            <button class="next "></button>
                            <div class="roll-point">
                                <span class="active">1</span>
                                <span>2</span>
                                <span>3</span>
                                <span>4</span>
                                <span>5</span>
                            </div> 
                </div>
                <div class="content-menu-content-right-pics">
                    <a href="">
                        <img src="images/01.png" alt="">
                    </a>
                    <a href="">
                        <img src="images/02.png" alt="">
                    </a>
                    <a href="">
                        <img src="images/03.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <!-- 小米明星单品 -->
        <div class="xmstart">
            <span>小米明星单品</span>
            <span>根据机型选配件</span>
            <div class="xmstart-btn"> 
                <button></button>
                <button></button>
             </div>
           
        </div>
        <!-- 小米星内容 -->
        <div class="xmstart-content xmstart-content-border-left">
            <a href="">
                <img src="images/XMS1.jpg" alt="">
                <p>小米智能插座</p>
                <p>让普通家电变得智能</p>
            </a> 
        </div>
        <div class="xmstart-content">
                <a href="">
                    <img src="images/XMS2.jpg" alt="">
                    <p>小米空气净化器</p>
                    <p>高性能智能空气净化器立即预约</p>
                </a> 
        </div>
        <div class="xmstart-content">
                    <a href="">
                        <img src="images/XMS3.jpg" alt="">
                        <p>小米活塞耳机简装版</p>
                        <p>好声音原子活塞式耳腔，延续经典设计</p>
                    </a> 
        </div>
        <div class="xmstart-content">
                        <a href="">
                            <img src="images/XMS4.jpg" alt="">
                            <p>小米路由器</p>
                            <p>顶及双屏幕AC智能路由器，内置1TB大硬盘</p>
                        </a> 
        </div>
        <div class="new-arrival">
                <span>新品上架</span>
                <button>更多&gt;</button>    
        </div>
        <!-- 新品上架 -->
        <div class="new-arrival-content">
            <div class="new-arrival-content-left">
                <!-- 新品内容三个大小的盒子
                    L-w:620px h310px;
                    M-w:310px h310px;
                    X-w:310px h155px;
                 -->
                <div class="new-arrival-L new-arrival-border-left">
                    <a href=""><img src="images/new1.jpg" alt=""></a>                    
                </div>
                <div class="new-arrival-M new-arrival-border-left">
                    <a href="">
                        <span>小米手环<br>79元</span>
                        <img src="images/new2.jpg" alt="">
                    </a>
                </div>
                <div class="new-arrival-M ">
                    <div class="new-arrival-X new-arrival-border-bottom new-arrival-border-left">
                    <a href="">
                        <span>5周年米兔钥匙扣<br>9.9元</span>
                        <img src="images/new3-1.png" alt="">
                    </a>
                </div>
                <div class="new-arrival-X new-arrival-border-left">
                        <a href="">
                            <span>QCY派Q8蓝牙耳机<br>59.9元</span>
                            <img src="images/new6-1.png" alt="">
                        </a>
                    </div>
                </div>
                
                <div class="new-arrival-M">
                    <a href="">
                        <span>小米T恤路标MILOGO<br>39元</span>
                        <img src="images/new4.jpg" alt="">
                    </a>
                </div>
                <div class="new-arrival-M">
                    <a href="">
                        <span>小米4实木后盖<br>69元</span>
                        <img src="images/new5.jpg" alt="">
                    </a>
                </div>
                
                <div class="new-arrival-M  new-arrival-border-bottom new-arrival-border-left">
                    <a href="">
                        <span>小米Note超薄保护壳<br>49元</span>
                        <img src="images/new7.png" alt="">
                    </a>
                </div>
                <div class="new-arrival-M new-arrival-border-bottom">
                    <a href="">
                        <span>小米自拍杆<br>49元</span>
                        <img src="images/new8.jpg" alt="">
                    </a>
                </div>
                <div class="new-arrival-M new-arrival-border-bottom ">
                    <a href="">
                        <span>先锋CL31系列耳式耳机<br>99元</span>
                        <img src="images/new9.jpg" alt="">
                    </a>
                </div>

            </div>
            <div class="new-arrival-content-right">
                <!-- 特价商品 new-arrival-content-right-shop-->
                <div class="new-arrival-content-right-shop">
                    <a href="">
                        <span>特价商品</span>
                        <span>SanDisk32GB存储卡</span>
                        <span>79元</span><span>109元</span>
                        <span>还有更多特价商品</span>
                       
                        <img src="images/sd.png" alt="">
                    </a>
                </div> 
                 <!--普通商品 new-arrival-content-right-shopping -->
                <div class="new-arrival-content-right-shopping">
                    <a href="">
                        <span>特惠配件套餐</span><br>
                        <span>手机必备配件组合购买<br>
                        实惠更优惠</span>
                        <img src="images/tutu.png" alt="">
                    </a>
                </div>      
                <div class="new-arrival-content-right-shopping">
                    <a href="">
                        <span>我爱哭玩</span><br>
                        <span>邂逅酷炫的电子产品<br>
                        结交叫趣味相投的朋友</span>
                        <img src="images/cheche.png" alt="">
                    </a>
                </div>  
                <!-- 右部导航栏  -->
                <div class="new-arrival-content-right-nav">
                    <!-- 内容 -->
                    <div class="new-arrival-content-right-nav-content">
                        <span>企业用户采购通道</span>
                        <span>&gt;</span>
                    </div>
                    <div class="new-arrival-content-right-nav-content">
                        <span>小米手机防伪查询</span>
                        <span>&gt;</span>
                    </div>
                    <div class="new-arrival-content-right-nav-content">
                        <span>小米手机官翻版</span>
                        <span>&gt;</span>
                    </div>
                    <div class="new-arrival-content-right-nav-content">
                        <span>小米路由器官翻版</span>
                        <span>&gt;</span>
                    </div>
                    <div class="new-arrival-content-right-nav-content">
                        <span>米粉红包</span>
                        <span>&gt;</span>
                    </div>
                    <!-- 话费充值位置 -->
                    <div class="new-arrival-content-right-nav-telephone">
                        <span class="font-s17 line-h50">话费充值</span>
                        <input type="text"  placeholder="请输入手机号">
                        <div class="telephone-select-pay">
                            <select class="telephone-select-paying">
                                    <option value="100">100元</option>
                                    <option value="200">200元</option>
                                    <option value="300">300元</option>
                            </select> 

                        </div>
                          <p>实付价格98.4元起</p>
                          <button class="telephone-ljcz">立即充值</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-frame">
        <div class="footer-content-frame">
            <div class="footer-content-top-frame">
                <div class="footer-content-top-menu">
                    <a href="">
                        <img src="images/10.png" alt="">
                        <p>1小时快修服务</p>
                    </a>  
                </div>
                <div class="footer-content-top-menu">
                    <a href="">
                        <img src="images/11.png" alt="">
                        <p>7天无理由退货</p>
                    </a>  
                </div>
                <div class="footer-content-top-menu">
                    <a href="">
                        <img src="images/12.png" alt="">
                        <p>15天免费换货</p>
                    </a>  
                </div>
                <div class="footer-content-top-menu">
                    <a href="">
                        <img src="images/13.png" alt="">
                        <p>满150元包邮</p>
                    </a>  
                </div>
                <div class="footer-content-top-menu">
                    <a href="">
                        <img src="images/14.png" alt="">
                        <p>520余家售后网点</p>
                    </a>  
                </div>
                
            </div>
            <div class="footer-content-bottom-frame">
                <div class="footer-content-bottom-menu">
                    <ul>
                        <li>帮助中心</li>
                        <li><a href="">购物指南</a></li>
                        <li><a href="">支付方式</a></li>
                        <li><a href="">配送方式</a></li>
                    </ul>
                </div>
                <div class="footer-content-bottom-menu">
                    <ul>
                        <li>服务支持</li>
                        <li><a href="">售后政策</a></li>
                        <li><a href="">自助服务</a></li>
                        <li><a href="">相关下载</a></li>
                    </ul>
                </div>
                <div class="footer-content-bottom-menu">
                    <ul>
                        <li>小米之家</li>
                        <li><a href="">小米之家</a></li>
                        <li><a href="">服务网站</a></li>
                        <li><a href="">预约亲临到店服务</a></li>
                    </ul>
                </div>
                <div class="footer-content-bottom-menu">
                    <ul>
                        <li>关于小米</li>
                        <li><a href="">了解小米</a></li>
                        <li><a href="">加入小米</a></li>
                        <li><a href="">联系我们</a></li>
                    </ul>
                </div>
                <div class="footer-content-bottom-menu">
                    <ul>
                        <li>关注我们</li>
                        <li><a href="">新浪微博</a></li>
                        <li><a href="">小米部落</a></li>
                        <li><a href="">官方微信</a></li>
                    </ul>
                </div>
                <div class="footer-content-bottom-call">
                    <p>400-100-5678</p>
                    <p class="line-h25">周一至周日8:00-18:00</p>
                    <p class="line-h25">仅收市话费</p>
                    <button>24小时在线客服</button>
                </div>
            </div>
            <div class="footer-bottom-frame">
                <div class="footer-bottom-content-top">
                    <span>小米旗下网站 : </span>
                     <a href="">小米网</a>
                     <a href="">MIUI</a>
                     <a href="">米聊</a>
                     <a href="">多看书城</a>
                     <a href="">小米路由器</a>
                     <a href="">繁体香港</a>
                     <a href="">繁体台湾</a>
                     <a href="">English</a>
                     <a href="">小米后院</a>
                     <a href="">小米天猫店</a>
                     <a href="">小米淘宝直营店</a>
                     <a href="">小米网盟</a> 
                     <p>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号 </p>
            </div>
               <div class="footer-bottom-content-bottom row">
                <img src="images/16.png" alt="">
                <select >
                        <option value="简体中文">简体中文</option>
                        <option value="繁体中文">繁体中文</option>
                        <option value="English">English</option>
                    </select>
               </div>       
            </div>
        </div>
    </div>

</body>

</html>